<template>
  <div class="login">
    <van-nav-bar
      title="账号登录"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="white"></div>
    <van-form @submit="onSubmit" ref="form" name="form">
      <van-field
        v-model="username"
        name="username"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }, { pattern: /^\w{6,16}$/, message: '账户名必须6-16个字符'}]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }, { pattern: /^\w{6,16}$/, message: '密码必须6-16个字符'}]"
      />
      <div
        style="margin: 16px;"
        class="button"
      >
        <van-button
          block
          type="primary"
          native-type="submit"
        >登录</van-button>
      </div>
    </van-form>
    <div class="link">
      <router-link to="/register">还没有账号，去注册~</router-link>
    </div>
  </div>
</template>

<script>
import { login } from '@/apis/user'
// import { login } from '@/apis/user'
export default {
  name: 'login-page',
  components: {},
  props: {},
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {
    async onSubmit (values) {
      const res = await this.$refs.form.validate(['username', 'password']).then(() => true).catch(() => false)
      if (res) {
        const { data } = await login(values)
        if (data.status === 400) return
        this.$router.push('/layout')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.login {
  background-color: #fff;
}
.white {
  width: 100%;
  height: 21px;
  background-color: #fff;
}
.van-form {
  background-color: #fff;
  padding: 0 15px;
  .van-field {
    font-size: 16px;
    height: 50px;
    padding: 2px 0;
  }
  .button {
    margin: 0 !important;
    margin-top: 27px !important;
    .van-button {
      background-color: #1cb676;
    }
  }
  .van-cell {
    height: 50px;
    &::after {
      content: "";
      width: 345px;
      left: 0;
      bottom: 0;
    }
    .van-cell__value {
      height: 50px;
    }
  }
}
.link {
  margin: 30px auto;
  text-align: center;
  font-size: 14px;
  a {
    color: #666;
  }
}
</style>
